import type { Metadata, Viewport } from "next";
import "./globals.css";
import { ThemeProvider } from "@/components/theme-provider";
import { Navbar } from "@/components/navbar";
import { cn } from "@/lib/utils";
import ICPFooter from "@/components/icp-footer";
import { LanguageProvider } from "@/context/language-provider";


export const metadata: Metadata = {
  title: "拜托了，学长！- 考试回忆系统",
  description: "考试信息查询与回忆共享平台，帮助同学们更好地准备考试",
};

export const viewport: Viewport = {
  width: "device-width",
  initialScale: 1,
  maximumScale: 1,
  userScalable: false,
  themeColor: [
    { media: "(prefers-color-scheme: light)", color: "white" },
    { media: "(prefers-color-scheme: dark)", color: "#0f172a" },
  ],
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="zh-CN" suppressHydrationWarning>
      <body
        className={cn(
          "min-h-screen font-sans antialiased",
        )}
      >
        <ThemeProvider
          attribute="class"
          defaultTheme="dark"
          enableSystem
          disableTransitionOnChange
        >
          <LanguageProvider>
            <div className="relative flex min-h-screen flex-col">
              <Navbar />
              <div className="fixed inset-0 -z-10 overflow-hidden">
                <div
                  className="absolute left-[10%] top-[20%] h-[30vw] w-[30vw] rounded-full blur-[100px] blob-animation bg-[hsla(var(--primary),0.2)]"
                />
                <div
                  className="absolute right-[15%] top-[30%] h-[35vw] w-[35vw] rounded-full blur-[120px] blob-animation bg-[hsla(217,91%,60%,0.1)]"
                />
                <div
                  className="absolute bottom-[10%] left-[40%] h-[40vw] w-[40vw] rounded-full blur-[130px] blob-animation bg-[hsla(240,67%,60%,0.1)]" 
                />
              </div>
              <main className="flex-1 px-3 py-6 sm:px-4 sm:py-8 md:px-8 lg:px-12 max-w-full sm:max-w-7xl mx-auto w-full overflow-x-hidden">
                <div className="page-transition px-2 sm:px-3 md:px-0">
                  {children}
                </div>
              </main>
              <footer className="mt-auto py-4">
                <ICPFooter />
              </footer>
            </div>
          </LanguageProvider>
        </ThemeProvider>
      </body>
    </html>
  );
}
